<template>
  <view id="box">
    <image src="/static/image/mybg.jpg" mode="" />
    <view class="main-title c-pt40 c-fs-34 c-fw600 c-color-000">欢迎来到</view>
    <view class="subhead c-mt10 c-mb40 c-fs-50 c-fw600 c-color-000">爱丽雅小程序</view>
    <view class="c-flex border" :class="{'border-red': !isPhone}">
      <view class="c-flex-2 c-line-h-60">
        +86
        <u-icon name="arrow-down" class="c-ml10"></u-icon>
      </view>
      <view class="c-flex-7 c-mt10">
        <input @input="isMobile" placeholder="请输入您的手机号" v-model="phone" type="text" class="c-line-h-60" />
      </view>
    </view>
    <view class="c-text-center c-fs-24 c-mt40">
      登录同意<text class="c-color-F36">《用户协议》</text>
      和
      <text class="c-color-F36">隐私政策</text>
      首次登录将自动注册
    </view>
    <view class="c-mt100"></view>
    <u-button
      :hair-line="false"
      :custom-style="{
        width: '100%',
        height: '105rpx',
        fontSize: '35rpx',
        fontFamily: 'PingFang SC',
        fontWeight: 'bold',
        color: '#fff',
        backgroundColor: '#F3651F',
        border: 'none',
        borderRadius: '30rpx'
      }"
      @click="get"
      >获取验证码</u-button
    >
  </view>
</template>

<script>
  import user from '../../services/user'
  export default {
    data() {
      return {
        value: '',
        phone: '',
        isPhone: true,
        boo: false
      }
    },
    methods: {
      isMobile() {
        this.isPhone = this.$u.test.mobile(this.phone)
      },
      get() {
        if (this.phone && this.isPhone && this.boo) {
          user.sendCode(this.phone).then(data => {
            if (data === 0) {
              setTimeout(() => {
                wx.navigateTo({
                  url: `/pages/phoneLogin/code?code=${data}&phone=${this.phone}`
                })
              }, 0)
            }
          })
        }
        if (this.phone === '') {
          wx.showToast({
            title: '请填写手机号',
            icon: 'none',
            duration: 2000
          })
        }
      },
      login() {
        wx.login().then(data => {
          if (data.errMsg === 'login:ok') {
            user.login({code: data.code}).then(data => {
              this.boo = true
            })
          } else {
            wx.showToast({
              title: '验证失败，稍后再试'
            })
          }
        })
      }
    },
    mounted() {
      this.login()
    }
  }
</script>

<style scoped></style>
<style lang="scss" scope>
  #box {
    padding: 80rpx 30rpx 0;
    image {
      width: 170rpx;
      height: 170rpx;
      border-radius: 24rpx;
    }
    // .c-flex {
    //   justify-content: center;
    // }
    .border {
      border: 1px solid #eff2f8;
      border-radius: 36rpx;
      padding: 20rpx;
    }
    .border-red {
      border-color: red !important;
    }
  }
</style>
